<style lang="scss" scoped>
@import "@/assets/css/variable";
.caseList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: $padding-lg;

  .panle_list {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0.8rem;
    width: 100%;
    padding: 0 12px;
    .panle {
      position: relative;
      box-sizing: border-box;
      margin: 0.8rem 0;
      width: 48.8%;
      border-radius: 5px;
      background-color: white;
      overflow: hidden;
      .parallelogram {
        position: absolute;
        font-size: 12px;
        color: white;
        border-radius: 5px;
        padding: 4px 5px;
        -webkit-transform: skew(6deg);
        // background:rgba(0,0,0,0.1);
        span {
          -webkit-transform: skew(2deg);
        }
      }
      .img-box {
        // display: flex;
        // align-items: center;
        width: 100%;
        // height: 12rem;
        overflow: hidden;
        background-color: #c7c7c7;
        // border-radius: $border-radius-lg;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .panle_item {
        margin: 12px 10px 0;
        .title {
          font-size: 1.22rem;
          color: #666;
          line-height: 20px;
        }
        .title_up {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 12px 0;
          font-size: 12px;
          color: #999;
          .title_left {
            display: flex;
            align-items: center;
            .icon_van {
              span {
                color: #ff4242;
                margin: 0 10px 0 3px;
              }
            }
          }
        }
      }
    }
  }

  .card {
    width: 100%;
    display: flex;
    padding: $padding-lg;
    // border-radius: $border-radius-lg;
    overflow: hidden;
    background-color: white;
    margin-top: 0.8rem;
    // &:last-child{
    //   margin-bottom: 0;
    // }
    .img-box {
      display: flex;
      align-items: center;
      width: 33%;
      height: 70px;
      overflow: hidden;
      background-color: #c7c7c7;
      border-radius: $border-radius-lg;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .title-box {
      margin-left: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .title {
        font-size: 1.5rem;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 设置行数 */
        -webkit-box-orient: vertical;
        color: $color-subtitle;
        line-height: 1.2em;
      }
    }
  }
  .show {
    background-color: white;
    position: relative;
    margin-bottom: 60px;
    .close-icon {
      position: absolute;
      width: 2.6rem;
      height: 2.6rem;
      right: 1rem;
      top: 1rem;
      border-radius: 1.3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    img {
      width: 100%;
    }
    .description {
      font-size: 1.7rem;
      font-weight: bold;
      padding-top: 1.2rem;
      padding-bottom: 1.2rem;
      padding-left: 2rem;
      position: relative;
      border-bottom: 1px solid $border-c;
    }
    .introduce {
      background-color: white;
      padding-bottom: 1rem;
      padding: 1.8rem;
    }
    .fix-bottom {
      position: fixed;
      bottom: 58px;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 3000;
      box-sizing: border-box;
      // margin-bottom: 50px;margin-top: 20px;
    }
  }
}
</style>

<template>
  <div class="caseList">
    <div class="panle_list">
      <div class="panle" v-for="item in caseList" :key="item.id" @click="getCaseById(item.id)">
        <div class="parallelogram" :style="{ backgroundColor: $store.getters.getMasterColor }"><span>{{item.typename.name}}</span></div>
        <div class="img-box">
          <img :src="item.cover" :alt="item.title" />
        </div>
        <div class="panle_item">
          <div class="title">{{ item.title }}</div>
          <div class="title_up">
              <div class="title_left">
                <div class="icon_van">
                  <van-icon name="fire" :color="'#ff4242'"/>
                  <span>{{ item.browse_num }}</span>
                </div>
                <span>热度</span>
              </div>
              <div class="title_right">
                <span>{{ item.use_num }}</span>
                <span style="margin-left: 6px">领取</span>
              </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div
      class="card"
      v-for="item in caseList"
      :key="item.id"
      @click="getCaseById(item.id)"
    >
      <div class="img-box">
        <img :src="item.cover" :alt="item.title" />
      </div>
      <div class="title-box">
        <div class="title">{{ item.title }}</div>
        <div class="fs-12 color-s">该案例模板被关注{{ item.browse_num }}次</div>
        <div class="fs-12 color-s">
          其中有{{ item.use_num }}个商户使用过该案例模板
        </div>
      </div>
    </div> -->
    <van-popup v-model="show" position="bottom" round>
      <div class="show">
        <span
          class="close-icon"
          :style="{ backgroundColor: $store.getters.getMasterColor }"
          @click="show = false"
          ><van-icon color="white" name="cross"
        /></span>
        <div class="top">
          <img :src="caseItem.cover" alt="" />
        </div>
        <div class="description">{{ caseItem.title }} | 案例介绍</div>
        <div class="introduce padding-lr line-height-l">
          <div v-for="item in caseItem.introduce" :key="Number(item.id)">
            <div
              v-if="item.type === 'text'"
              class="margT-l line-height-l fs-15"
              v-html="item.value"
            ></div>
            <img v-if="item.type === 'img'" class="margT-l" :src="item.value" />
          </div>
        </div>
        <div class="tabbar-height"></div>
        <div class="fix-bottom padding-lr" style="display: flex">
          <van-button
            :color="$store.getters.getMasterColor"
            size="normal"
            block
            @click="toExpView(caseItem)"
            >体验该活动</van-button
          >
          <van-button
            style="margin-left: 10px"
            :color="$store.getters.getMasterColor"
            size="normal"
            block
            @click="toView(caseItem)"
            >使用该方案</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template> 
<script>
import { Image as VanImage, Popup, Button, Toast, Icon, Dialog } from "vant";
export default {
  name: "CaseList",
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Dialog.name]: Dialog,
    VanImage,
  },
  props: {
    caseList: Array,
  },
  data() {
    return {
      show: false,
      caseItem: {},
      openid: "",
    };
  },
  created() {
    if (process.env.NODE_ENV == "production") {
      //线上环境
      this.openid = localStorage.getItem("OPENID") || "没获取到";
    } else {
      this.openid = this.$store.state.openid || localStorage.getItem("OPENID");
    }
    //const caseList = _this.$store.getters.getCaseTabsList;
  },
  methods: {
    getMerchantItem(item) {
      const toast = Toast.loading({
        forbidClick: true,
        message: "加载中...",
      });
      let params = {
        openid: this.openid,
      };
      console.log("params", params);
      this.$request.getMerchantItem(params).then((res) => {
        console.log("params_res", res);
        // 判断用户是否存在商户id
        if (res.data.id) {
          localStorage.setItem('merchant_id',res.data.id)
          this.userInfo = res.data;
          this.$store.commit("setUserInfo", this.userInfo);
          const url = `/case/${item.model}/${item.activity_id}?is_edit=0&case_id=${item.id}`;
          this.$router.push(url);
        } else {
          console.log(23123);
          //  Toast("请先去添加商户")
          this.userInfo = this.$store.state.userInfo;
          Dialog.alert({
            title: "系统提示",
            message: "请先去添加商户！",
          }).then(() => {
            // on close
            this.$router.push("merchant");
          });
        }
        toast.clear();
      });
    },
    getCaseById(id) {
      const _this = this;
      const toast = Toast.loading({
        forbidClick: true,
        message: "加载中...",
      });
      let params = {
        id: id,
      };
      _this.$request.getCaseById(params).then((res) => {
        _this.caseItem = res.data;
        // this.$store.commit('setCaseItem', _this.caseItem);
        toast.clear();
        _this.show = true;
      });
    },
    toView(item) {
      this.getMerchantItem(item);
    },
    toExpView(item) {
      console.log("item", item);
      const url = `${location.protocol}//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/plugin/index.html#/caseShow/${item.model}/activityShow/${
        item.activity_id
      }`;
      console.log("url", url);
      // alert("url:"+url)
      window.location.href = url;
      // this.$router.push(url)
    },
  },
};
</script>
